<template>
  <div class="sgb-page">
    <div class="sgb-daterange">
      <span class="sgb-daterange-title">统计区间</span>
      <div style="display: flex;justify-content: space-between;width: 100%;">
        <el-date-picker
            v-model="form.tjqj"
            :change="selectDate()"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            size="small"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-button style="margin-right: 20px;" type="primary" plain size="medium" @click="gotoSystem">进入系统
        </el-button>
      </div>
    </div>
    <div class="sgb-content">
      <div class="sgb-content-left">
        <div class="sgb-content-left-top">
          <div class="sgb-content-left-top-box">
            <div class="sgb-content-left-top-box-content">
              <div class="sgb-content-left-top-box-content-title"><span>今日总览</span></div>
              <div class="sgb-content-left-top-box-content-data">
                <div class="sgb-content-left-top-box-content-data-box">
                  <div class="sgb-content-left-top-box-content-data-box-title">今日新增案件风险数</div>
                  <div class="sgb-content-left-top-box-content-data-box-data">
                    <div class="sgb-content-left-top-box-content-data-box-data-left" v-loading="loading_jrzl_aj" >
                      <div class="sgb-content-left-top-box-content-data-box-data-left-box" v-for="item in jrzl_ajfxs" @click="goToChoseCase">{{item}}</div>
                    </div>
                    <div class="sgb-content-left-top-box-content-data-box-data-right">
                      <div class="sgb-content-left-top-box-content-data-box-data-right-top" v-loading="loading_jrzl_aj_g">
                        <div class="sgb-content-left-top-box-content-data-box-data-right-top-name">高风险</div>
                        <div class="sgb-content-left-top-box-content-data-box-data-right-top-data">{{jrzl_aj_g}}</div>
                      </div>
                      <div class="sgb-content-left-top-box-content-data-box-data-right-top" v-loading="loading_jrzl_aj_z">
                        <div class="sgb-content-left-top-box-content-data-box-data-right-top-name">中风险</div>
                        <div class="sgb-content-left-top-box-content-data-box-data-right-top-data">{{jrzl_aj_z}}</div>
                      </div>
                      <div class="sgb-content-left-top-box-content-data-box-data-right-top" v-loading="loading_jrzl_aj_d">
                        <div class="sgb-content-left-top-box-content-data-box-data-right-top-name">低风险</div>
                        <div class="sgb-content-left-top-box-content-data-box-data-right-top-data">{{jrzl_aj_d}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sgb-content-left-bottom">
          <div class="sgb-content-left-bottom-box">
            <div class="sgb-content-left-bottom-box-content">
              <div class="sgb-content-left-bottom-box-content-title"><span>存量案件风险统计</span></div>
              <div class="sgb-content-left-bottom-box-content-data">
                <div class="sgb-content-left-bottom-box-content-data-left" v-loading="loading_ajfxtj_1"><div id="echart_fxtj_1" class="echartFxtjCss"></div></div>
                <div class="sgb-content-left-bottom-box-content-data-left" v-loading="loading_ajfxtj_2"><div id="echart_fxtj_2" class="echartFxtjCss"></div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sgb-content-right">
        <div class="sgb-content-right-top">
          <div class="sgb-content-right-top-box">
            <div class="sgb-content-right-top-box-content">
              <div class="sgb-content-right-top-box-content-title"><span>重要节点监督</span></div>
              <div class="sgb-content-right-top-box-content-data" v-loading="loading_zyjdjd"><div id="echart_zyjdjd" class="echartFxtjCss"></div></div>
            </div>
          </div>
          <div class="sgb-content-right-top-box" style="width: 40%">
            <div class="sgb-content-right-top-box-content">
              <div class="sgb-content-right-top-box-content-title"><span>重要案件监督</span></div>
              <div class="sgb-content-right-top-box-content-data" v-loading="loading_zyajjd"><div id="echart_zyajjd" class="echartFxtjCss"></div></div>
            </div>
          </div>
        </div>
        <div class="sgb-content-right-bottom">
          <div class="sgb-content-right-bottom-left-box">
            <div class="sgb-content-right-bottom-left-box-content">
              <div class="sgb-content-right-bottom-left-box-content-title"><span>立案均衡度分析</span></div>
              <div class="sgb-content-right-bottom-left-box-content-data" v-loading="loading_lajh"><div id="echart_lajh" class="echartLajhCss"></div></div>
            </div>
          </div>
          <div class="sgb-content-right-bottom-right-box">
            <div class="sgb-content-right-bottom-right-box-content">
              <div class="sgb-content-right-bottom-right-box-content-title"><span>消息预警<span style="color:red">（需平台接入数据）</span></span></div>
              <div class="sgb-content-right-bottom-right-box-content-data">
                  <el-table
                    :data="xxyjList"
                    height="calc(100% - 40px)"
                    stripe
                    size="mini"
                    :header-cell-style="{textAlign: 'center',verticalAlign : 'center'}">
                    <el-table-column label="序号"  :index="getIndex" type="index" align="center" width="60"></el-table-column>
                    <el-table-column prop="ah" label="案号" align="center"></el-table-column>
                    <el-table-column prop="clyj" label="处理意见" align="center"></el-table-column>
                    <el-table-column prop="yjly" label="意见来源" align="center"></el-table-column>
                  </el-table>
                  <el-pagination
                    small
                    @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next" :total="pagination.total">
                  </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./index_sgb.js"></script>

<style scoped>

  .sgb-page{
    height: 100%;
    background-color: #F0F1F6;
    height: calc(100vh - 10px);
    overflow-x: hidden;
  }

  .sgb-daterange{
    display: flex;
    align-items: center;
    height: 20px;
    margin-top: 20px;
    width: 100%;

    .sgb-daterange-title{
      font-size: 12px;
      margin-left: 20px;
      width: 60px;
    }
  }

  .sgb-content{
    height: calc(100vh - 100px);
    display: flex;

    .sgb-content-left{
      width: 30%;
      margin-right: 30px;
      .sgb-content-left-top{
        height: 28%;
        margin-bottom: 10px;
        .sgb-content-left-top-box {
          width: 100%;
          height: 100%;
          padding: 20px;
          padding-bottom: 0px;
          .sgb-content-left-top-box-content {
            width: 100%;
            height: 100%;
            border-radius: 8.5px;
            background-color: rgb(255, 255, 255);
            .sgb-content-left-top-box-content-title{
              height: 50px;
              color: rgb(51, 51, 51);
              font-size: 18px;
              font-weight: bold;
              padding: 10px;
            }
            .sgb-content-left-top-box-content-data{
              height: calc(100% - 50px);
              display: flex;
              padding-left: 5%;
              padding-right: 5%;
              padding-bottom: 2%;
              .sgb-content-left-top-box-content-data-box{
                flex: 1;
                padding: 10px;
                .sgb-content-left-top-box-content-data-box-title{
                  font-size: 11px;
                  height: 20px;
                  padding-left: 5%;
                }
                .sgb-content-left-top-box-content-data-box-data{
                  height: calc(100% - 20px);
                  display: flex;
                  .sgb-content-left-top-box-content-data-box-data-left{
                    width: 60%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .sgb-content-left-top-box-content-data-box-data-left-box{
                      cursor: pointer;
                      flex: 1;
                      background-color: rgb(0, 157, 255);
                      border-radius: 5px;
                      margin: 10px 3px;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      color: white;
                      font-size: 40px;
                      font-weight: bold;
                      max-height: 60px;
                      min-height: 60px;
                      max-width: 40px;
                      min-width: 20px;
                    }
                  }
                  .sgb-content-left-top-box-content-data-box-data-right{
                    width: 40%;
                    .sgb-content-left-top-box-content-data-box-data-right-top{
                      height: 33%;
                      display: flex;
                      .sgb-content-left-top-box-content-data-box-data-right-top-name{
                        width: 60%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 13px;
                      }
                      .sgb-content-left-top-box-content-data-box-data-right-top-data{
                        width: 40%;
                        display: flex;
                        justify-content: left;
                        align-items: center;
                        font-size: 14px;
                        font-weight: bold;
                        color: rgb(255, 150, 14);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .sgb-content-left-bottom{
        height: 70%;
        .sgb-content-left-bottom-box {
          width: 100%;
          height: 100%;
          padding: 20px;
          .sgb-content-left-bottom-box-content {
            width: 100%;
            height: 100%;
            border-radius: 8.5px;
            background-color: rgb(255, 255, 255);
            .sgb-content-left-bottom-box-content-title{
              height:50px;
              color: rgb(51, 51, 51);
              font-size: 18px;
              font-weight: bold;
              padding: 10px;
            }
            .sgb-content-left-bottom-box-content-data{
              height: calc(100% - 80px);
              padding: 0px 20px;
              .sgb-content-left-bottom-box-content-data-left{
                width: 100%;
                height: 50%;
              }
            }
          }
        }
      }
    }
    .sgb-content-right{
      width: 70%;
      .sgb-content-right-top{
        height: 60%;
        display: flex;
        margin-bottom: 10px;
        .sgb-content-right-top-box {
          width: 60%;
          height: 100%;
          padding: 20px;
          padding-bottom: 0px;
          padding-left: 0px;
          .sgb-content-right-top-box-content {
            width: 100%;
            height: 100%;
            border-radius: 8.5px;
            background-color: rgb(255, 255, 255);
            .sgb-content-right-top-box-content-title{
              height: 50px;
              color: rgb(51, 51, 51);
              font-size: 18px;
              font-weight: bold;
              padding: 10px;
            }
            .sgb-content-right-top-box-content-data{
              height: calc(100% - 50px);
            }
          }
        }
      }
      .sgb-content-right-bottom{
        height: 40%;
        display: flex;
        margin-top: 30px;
        .sgb-content-right-bottom-left-box {
          width: 45%;
          height: 100%;
          padding-bottom: 20px;
          padding-left: 0px;
          .sgb-content-right-bottom-left-box-content {
            padding: 10px;
            width: 100%;
            height: 90%;
            border-radius: 8.5px;
            background-color: rgb(255, 255, 255);
            .sgb-content-right-bottom-left-box-content-title{
              height: 50px;
              color: rgb(51, 51, 51);
              font-size: 18px;
              font-weight: bold;
            }
            .sgb-content-right-bottom-left-box-content-data{
              height: calc(100% - 50px);
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
        .sgb-content-right-bottom-right-box {
          width: 55%;
          height: 85%;
          margin-left: 30px;
          .sgb-content-right-bottom-right-box-content {
            width: 100%;
            height: 100%;
            border-radius: 8.5px;
            padding: 20px;
            background-color: rgb(255, 255, 255);
            .sgb-content-right-bottom-right-box-content-title{
              height: 50px;
              color: rgb(51, 51, 51);
              font-size: 18px;
              font-weight: bold;
              padding: 10px;
            }
            .sgb-content-right-bottom-right-box-content-data{
              height: calc(100% - 50px);
              padding: 0px 20px;
            }
          }
        }
      }
    }
  }

  /deep/.el-date-editor .el-range-separator{
    width: auto;
  }
  .echartWglaCss{
    width: 90%;
    height: 90%;
    max-width: 120px;
    min-width: 120px;
  }
  .echartTyzxCss{
    width: 90%;
    height: 90%;
    max-width: 120px;
    min-width: 120px;
  }
  .echartFxtjCss{
    width: 100%;
    height: 100%;
  }
  .echartLajhCss{
    width: 90%;
    height: 95%;
  }

  /deep/.el-table th{
    background: transparent;
  }
  /deep/ .el-table--mini td{
    padding: 2px;
  }
  /deep/ .el-table .cell{
    font-size: 10px;
  }
  /deep/ .el-table th>.cell{
    font-size: 10px;
    font-weight: bold;
  }
  /deep/ .el-pagination__sizes .el-input .el-input__inner{
    font-size:10px;
  }
  /deep/.el-pagination{
    padding: 0px;
    padding-top: 10px;
    font-size: 10px;
    font-weight: normal;
  }
  /deep/.el-input--mini .el-input__inner{
    height: 24px;
  }
  /deep/.el-table::before{
    width: 0px;
  }
</style>
